<template>
  <div class="page4">
    <div class="pages-menu">
      <span class="up" @click="getUp">上一页</span>
      <span class="down" @click="getDown">下一页</span>
    </div>
    <Row :gutter="12" type="flex" justify="space-between">
      <Col span="7">
        <titleBox
          :width="500"
          :height="320"
          :titleWidth="196"
          :titleHeight="40"
          :title="'路侧车场'"
        >
          <template #content>
            <div class="zhanbi">
              <xiejiaoEchartsVue></xiejiaoEchartsVue>
              <div class="zhanbi-desc">
                <div>占用 <span class="desc-red">15.25%</span></div>
                <div><span class="desc-blue">84.75%</span> 空闲</div>
              </div>
            </div>
            <div class="detail-list">
              <div class="line">
                <div class="row-line"></div>
                <div class="col-line"></div>
              </div>
              <deatil
                v-for="(item, index) in roadside"
                :key="index"
                :icon="item.icon"
                iconType="url"
                :number="item.number"
                :numberColor="item.numberColor"
                :description="item.description"
              />
            </div>
          </template>
        </titleBox>
        <titleBox
          :width="500"
          :height="281"
          :titleWidth="173"
          :titleHeight="40"
          :title="'道闸车场'"
        >
          <template #content>
            <div class="detail-list only-one">
              <div class="line">
                <div class="row-line"></div>
                <div class="col-line"></div>
              </div>
              <deatil
                v-for="(item, index) in barrierGate"
                :key="index"
                :icon="item.icon"
                iconType="url"
                :number="item.number"
                :numberColor="item.numberColor"
                :description="item.description"
              />
            </div>
          </template>
        </titleBox>
        <titleBox
          :width="500"
          :height="310"
          :titleWidth="173"
          :titleHeight="40"
          :title="'路侧运营数据'"
        >
          <template #content>
            <div class="detail-list">
              <cashEchartsVue
                :title="'收费率'"
                :numColor="'#0e93e6'"
                :pieColor="'#47aef5'"
                :centerIcon="'doller'"
              ></cashEchartsVue>
              <weekEchartsVue></weekEchartsVue>
            </div>
          </template>
        </titleBox>
      </Col>
      <Col span="10" class="main">
        <div class="map-container">
          <china-map :height="'3.6979rem'"></china-map>
        </div>
        <titleBox
          :width="800"
          :height="200"
          :titleWidth="192"
          :titleHeight="40"
          :title="'当日实时数据'"
          :backBg="'center-bottom-bg'"
        >
          <template #content>
            <div class="detail-list">
              <ul>
                <li>
                  <div class="data-num">
                    <span>145,134,21</span>
                  </div>
                  <span class="desc">今日车流量数(次)</span>
                </li>
                <li>
                  <div class="data-num">
                    <span>145,134,21</span>
                  </div>
                  <span class="desc">今日车流量数(次)</span>
                </li>
                <li>
                  <div class="data-num">
                    <span>145,134,21</span>
                  </div>
                  <span class="desc">今日车流量数(次)</span>
                </li>
                <li>
                  <div class="data-num">
                    <span>145,134,21</span>
                  </div>
                  <span class="desc">今日车流量数(次)</span>
                </li>
              </ul>
            </div>
          </template>
        </titleBox>
      </Col>
      <Col span="7">
        <titleBox
          :width="500"
          :height="280"
          :titleWidth="193"
          :titleHeight="40"
          :title="'2025年收费状态'"
        >
          <template #content>
            <div class="detail-list only-one">
              <div class="line">
                <div class="row-line"></div>
                <div class="col-line"></div>
              </div>
              <deatil
                v-for="(item, index) in chargeList"
                :key="index"
                :icon="item.icon"
                iconType="url"
                :number="item.number"
                :numberColor="item.numberColor"
                :description="item.description"
              />
            </div>
          </template>
        </titleBox>
        <titleBox
          :width="500"
          :height="310"
          :titleWidth="173"
          :titleHeight="40"
          :title="'7日应收金额'"
          :menu="true"
        >
          <template #menu>
            <div class="menu-list">
              <ul>
                <li
                  @click="changeCashIndex(1)"
                  :class="{ cashChoise: cashIndex == 1 }"
                >
                  按日
                </li>
                <li
                  @click="changeCashIndex(2)"
                  :class="{ cashChoise: cashIndex == 2 }"
                >
                  按月
                </li>
                <li
                  @click="changeCashIndex(3)"
                  :class="{ cashChoise: cashIndex == 3 }"
                >
                  按年
                </li>
              </ul>
            </div>
          </template>
          <template #content>
            <lineEcharsBarVue></lineEcharsBarVue>
          </template>
        </titleBox>
        <titleBox
          :width="500"
          :height="318"
          :titleWidth="173"
          :titleHeight="40"
          :title="'停车排行当日'"
          :menu="true"
        >
          <template #menu>
            <div class="menu-list">
              <ul>
                <li
                  @click="changeChoise(1)"
                  :class="{ cashChoise: sortIndex == 1 }"
                >
                  按日
                </li>
                <li
                  @click="changeChoise(2)"
                  :class="{ cashChoise: sortIndex == 2 }"
                >
                  按月
                </li>
                <li
                  @click="changeChoise(3)"
                  :class="{ cashChoise: sortIndex == 3 }"
                >
                  按年
                </li>
              </ul>
            </div>
          </template>
          <template #content>
            <scrolList
              :scrol-list-cloums="scrolListCloums"
              :table-data="tableData"
            ></scrolList>
          </template>
        </titleBox>
      </Col>
    </Row>
  </div>
</template>

<script>
import titleBox from './components/common/titleBox.vue';
import xiejiaoEchartsVue from './components/common/xiejiaoEcharts.vue';
import deatil from './components/common/deatil.vue';
import cashEchartsVue from './components/common/cashEcharts.vue';
import weekEchartsVue from './components/common/weekEcharts.vue';
const chinaMap = () => import('./components/common/chinaMap');
import lineEcharsBarVue from './components/common/lineEcharsBar.vue';
import scrolList from './components/common/scrolList.vue';
export default {
  name: 'page4',
  components: {
    titleBox,
    xiejiaoEchartsVue,
    deatil,
    cashEchartsVue,
    weekEchartsVue,
    chinaMap,
    lineEcharsBarVue,
    scrolList,
  },
  data() {
    return {
      roadside: [
        {
          icon: 'order',
          iconType: 'url',
          number: 890,
          numberColor: '#21f5f3',
          borderColor: '#535662',
          description: '订单总数(笔)',
        },
        {
          icon: 'price',
          iconType: 'url',
          number: 890,
          numberColor: '#456ada',
          borderColor: '#535662',
          description: '停车场数(个)',
        },
        {
          icon: 'money',
          iconType: 'url',
          number: 890,
          numberColor: '#e73a56',
          borderColor: '#535662',
          description: '欠费总额(元)',
        },
        {
          icon: 'pick',
          iconType: 'url',
          number: 890,
          numberColor: '#84db5b',
          borderColor: '#535662',
          description: '停车位数(个)',
        },
      ],
      barrierGate: [
        {
          icon: 'liulang',
          iconType: 'url',
          number: 890,
          numberColor: 'rgba(0, 168, 255, 1)',
          borderColor: '#535662',
          description: '今日车流量数(次)',
        },
        {
          icon: 'price',
          iconType: 'url',
          number: 890,
          numberColor: 'rgba(71, 108, 222, 1)',
          borderColor: '#535662',
          description: '停车场数(个)',
        },
        {
          icon: 'order',
          iconType: 'url',
          number: 890,
          numberColor: '#23fefb',
          borderColor: '#535662',
          description: '支付订单数(笔)',
        },
        {
          icon: 'pick',
          iconType: 'url',
          number: 890,
          numberColor: '#82d95a',
          borderColor: '#535662',
          description: '运营车位数(个)',
        },
      ],
      chargeList: [
        {
          icon: 'order',
          iconType: 'url',
          number: 890,
          numberColor: 'rgba(35, 255, 252, 1)',
          borderColor: '#535662',
          description: '今日车流量数(次)',
        },
        {
          icon: 'price',
          iconType: 'url',
          number: 890,
          numberColor: 'rgba(255, 193, 55, 1)',
          borderColor: '#535662',
          description: '停车场数(个)',
        },
        {
          icon: 'money',
          iconType: 'url',
          number: 890,
          numberColor: 'rgba(255, 124, 52, 1)',
          borderColor: '#535662',
          description: '支付订单数(笔)',
        },
        {
          icon: 'pick',
          iconType: 'url',
          number: 890,
          numberColor: 'rgba(236, 59, 88, 1)',
          borderColor: '#535662',
          description: '运营车位数(个)',
        },
      ],
      scrolListCloums: [
        { label: '排序', prop: 'rank', width: '80px', sortable: true },
        { label: '停车场', prop: 'name', width: '120px' },
        { label: '订单数(个)', prop: 'score', width: '100px', sortable: true },
        {
          label: '应收金额(元)',
          prop: 'date1',
          width: '120px',
          sortable: true,
        },
        {
          label: '实收金额(元)',
          prop: 'date2',
          width: '120px',
          sortable: true,
        },
      ],
      tableData: [
        {
          rank: 1,
          name: '停车场名称...',
          score: 98,
          date1: '300',
          date2: '200',
        },
        {
          rank: 2,
          name: '停车场名称...',
          score: 95,
          date1: '300',
          date2: '200',
        },
        {
          rank: 3,
          name: '停车场名称...',
          score: 92,
          date1: '300',
          date2: '200',
        },
        {
          rank: 4,
          name: '停车场名称...',
          score: 92,
          date1: '300',
          date2: '200',
        },
        {
          rank: 5,
          name: '停车场名称...',
          score: 92,
          date1: '300',
          date2: '200',
        },
        {
          rank: 6,
          name: '停车场名称...',
          score: 92,
          date1: '300',
          date2: '200',
        },
        {
          rank: 7,
          name: '停车场名称...',
          score: 92,
          date1: '300',
          date2: '200',
        },
      ],

      sortIndex: 1,
      cashIndex: 1,
      // 当前页面
      currentPageNumber: 1,
    };
  },
  methods: {
    changeChoise(index) {
      this.sortIndex = index;
    },
    changeCashIndex(index) {
      this.cashIndex = index;
    },
    getUp() {
      this.currentPageNumber++;
      if (this.currentPageNumber > 3) {
        this.currentPageNumber = 1; // 超过第三页跳转到第一页
      }
      this.$router.push(`/page${this.currentPageNumber}`);
    },
    getDown() {
      this.currentPageNumber--;
      if (this.currentPageNumber < 1) {
        this.currentPageNumber = 3; // 小于第一页跳转到第三页
      }
      this.$router.push(`/page${this.currentPageNumber}`);
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'PuHuiTi';
  src: url('../assets/font/AlibabaSans-Light.otf');
}

.page4 {
  width: 100%;
  padding: 0.0417rem 0.2083rem 0rem 0.2083rem;
  .ivu-col {
    height: 100%;
    display: grid;
    grid-gap: 0.1042rem;
    grid-template-rows: auto auto 33.33%;
  }
}

.zhanbi {
  font-size: 0.0833rem;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0rem 0.0781rem;
  padding: 0.0417rem 0rem;
  .zhanbi-desc {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.0208rem 0rem;
    width: 100%;
    font-size: 0.0729rem;
    .desc-red {
      color: rgba(236, 59, 88, 1);
    }
    .desc-blue {
      color: rgba(71, 108, 222, 1);
    }
  }
}

.detail-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0.0417rem 0rem;
  width: 100%;
  padding: 0rem 0.1042rem;
  position: relative;
  .line {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .row-line {
      width: 2.3958rem;
      height: 0.0052rem;
      position: absolute;
      top: 50%;
      left: 0%;
      background: radial-gradient(
        ellipse at center,
        rgba(0, 168, 255, 0.44),
        rgba(0, 168, 255, 0)
      );
      opacity: 0.3;
    }
    .col-line {
      width: 0.0104rem;
      height: 0.8333rem;
      position: absolute;
      left: 49.5%;
      top: 10%;
      background: radial-gradient(
        ellipse at center,
        rgba(0, 168, 255, 0.44),
        rgba(0, 168, 255, 0)
      );
      opacity: 0.3;
    }
  }
  ul {
    display: flex;
    justify-content: space-evenly;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      .data-num {
        width: 0.9375rem;
        height: 0.6771rem;
        text-align: center;
        background: url('../assets/fy/current-data.png') no-repeat;
        background-size: 100% 100%;
        padding: 0.2083rem 0rem;
        span {
          font-family: DIN;
          font-weight: bold;
          font-size: 0.125rem;
          color: rgba(0, 180, 255, 1);
          line-height: 0.1875rem;
        }
      }
      .desc {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 0.0729rem;
        color: #ffffff;
        line-height: 0.0833rem;
      }
    }
  }
}
.only-one {
  margin-top: 0.3125rem;
}
.map-container {
  height: 3.8021rem;
}
.menu-list {
  position: absolute;
  top: 0;
  right: 0;
  ul {
    display: flex;
    li {
      display: block;
      list-style: none;
      width: 0.3646rem;
      height: 0.1563rem;
      line-height: 0.1563rem;
      text-align: center;
      border: 0.0052rem solid #2099c58a;
      padding: 0rem 0.0521rem;
      letter-spacing: 0.0104rem;
      margin: 0.0625rem 0.0521rem;
      color: #1f9ecc6d;
      font-family: '微软雅黑';
      cursor: pointer;
      background: rgba(31, 158, 204, 0.2);
      border: 0.0052rem solid #2099c54a;
      user-select: none;
    }
    .activeChoise {
      color: rgb(255, 255, 255);
      background: rgba(31, 158, 204, 0.2);
      border: 0.0052rem solid #2099c5;
    }
    .cashChoise {
      color: rgb(255, 255, 255);
      background: rgba(31, 158, 204, 0.2);
      border: 0.0052rem solid #2099c5;
    }
  }
}

.pages-menu {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  padding: 10px;
  z-index: 99;
}

.pages-menu .up,
.pages-menu .down {
  padding: 8px 16px;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: linear-gradient(145deg, #1e90ff, #1c86ee);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pages-menu .up:hover,
.pages-menu .down:hover {
  background: linear-gradient(145deg, #63b8ff, #4682b4);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
</style>
